<template>
	<div class="app-container">
		<div class="content">
			<div class="aside">
				<div class="tree-header">
					<span><svg-icon icon-class="type" class-name='type-class'/>&nbsp;&nbsp;体检分类</span>
					<el-button icon="el-icon-plus" size="mini" type="primary" @click="addPhysicalType">
						添加
					</el-button>
				</div>
				<el-tree
					:data="treeData"
					:props="defaultProps"
					@node-click="handleNodeClick"
					highlight-current:true
					check-on-click-node:true
					:expand-on-click-node="false"
					show-checkbox:true
					default-expand-all
					node-key="id"
					ref="tree"
					class="tree"
					highlight-current
					:render-content="treeRender">
					<span slot-scope="{ data }" :title="data.name">
						<span v-if="data.children != null"><i class="el-icon-folder"></i>&nbsp;&nbsp;{{
								data.name
							}}</span>
						<span><i class="el-icon-folder"></i>{{ data.name }}</span>
					</span>
				</el-tree>
			</div>
			<el-col :span="18" class="border-left">
				<el-header height="50px" class="item-header">
					<div class="main-title">体检内容</div>
					<el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd(queryForm)">
						新增
					</el-button>
				</el-header>

				<el-table :data="queryForm" style="width: 100%" size="mini">
					<el-table-column label="编号" width="80">
						<template slot-scope="scope">
							<span>{{ scope.row.physicalId }}</span>
						</template>
					</el-table-column>
					<el-table-column label="体检名称" width="180">
						<template slot-scope="scope">
							<span>{{ scope.row.name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="体检内容" :show-overflow-tooltip="true" prop="content">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row.content)" type="text" size="small">查看参数详情
							</el-button>
						</template>
					</el-table-column>
					<el-table-column label="价格">
						<template slot-scope="scope">
							<span>{{ scope.row.price }}</span>
						</template>
					</el-table-column>
					<el-table-column
						label="是否热门">
						<template slot-scope="scope">
							<span v-if="scope.row.isHot == '0' ">是</span>
							<span v-if="scope.row.isHot == '1' ">否</span>
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
					>
						<template slot-scope="scope">
							<el-button @click="handleUpdate(scope.row)" type="text" size="small">编辑</el-button>
							<el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</div>
		<!-- 添加或修改【请填写功能名称】对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="体检名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入体检名称"/>
				</el-form-item>
				<el-form-item label="体检内容" style="height:300px;">
					<Editor v-model="form.content"/>
				</el-form-item>
				<el-form-item label="体检价格" prop="price">
					<el-input v-model="form.price" placeholder="请输入体检价格"/>
				</el-form-item>
				<el-form-item label="套餐备注" prop="price">
					<el-input v-model="form.notes" placeholder="请输入体检价格"/>
				</el-form-item>
				<el-form-item label="是否热门" prop="isHot">
					<el-switch v-model="value"></el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 添加对话框 -->
		<el-dialog :title="title" :visible.sync="ClassificationOpen" width="500px" append-to-body>
			<el-form ref="ClassificationFrom" :model="ClassificationFrom" label-width="80px">
				<el-form-item label="体检名称" prop="name">
					<el-input v-model="ClassificationFrom.name" placeholder="请输入体检名称"/>
				</el-form-item>
				<el-form-item label="体检图标" prop="icon">
					<el-upload
						ref="upload"
						:limit="1"
						accept=".jpg, .png"
						:action="upload.url"
						:headers="upload.headers"
						:file-list="upload.fileList"
						:on-progress="handleFileUploadProgress"
						:on-success="handleFileSuccess"
						:auto-upload="false">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading"
								   @click="submitUpload">上传到服务器
						</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="30%">
			<div v-html="formatData"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  			</span>
		</el-dialog>
	</div>

</template>

<script>
import {listType, addType, delType, updateType} from '@/api/hospital/physicalType'
import {getToken} from "@/utils/auth";
import Editor from '@/components/Editor';
import {addPhysical, listPhysical, getPhysical, updatePhysical, delPhysical} from '@/api/hospital/physical'

export default {
	components: {
		Editor
	},
	data() {
		return {
			form: {},
			value: true,
			open: false,
			formatData: '',
			treeData: [],
			queryForm: [],
			ClassificationFrom: {},
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			typeId: null,
			dialogVisible: false,
			ClassificationOpen: false,
			addPhysicalflag: false,
			flag: false,
			//查询数组
			queryParams: {},
			// 表单校验
			rules: {},
			// 弹出层标题
			title: "",
			// 上传参数
			upload: {
				// 是否禁用上传
				isUploading: false,
				// 设置上传的请求头部
				headers: {Authorization: "Bearer " + getToken()},
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + "/common/upload",
				// 上传的文件列表
				fileList: []
			},
		};
	},
	mounted() {
		this.getPhysicalType();
	},
	methods: {
		/** 查询【请填写功能名称】列表 */
		getList() {
			this.queryParams.typeId = this.typeId
			listPhysical(this.queryParams).then(response => {
				this.queryForm = response.rows;
				this.total = response.total;
			});
		},
		addPhysicalType() {
			this.ClassificationOpen = true;
			this.title = '新增';
		},
		handleClick(row) {
			this.formatData = row;
			this.dialogVisible = true;
		},
		getPhysicalType() {
			listType().then(res => {
				this.treeData = res.rows;
			});
		},
		handleNodeClick(obj, node, data) {
			this.typeId = obj.typeId
			listPhysical({typeId: this.typeId}).then(res => {
				this.queryForm = res.rows;
			})
		},
		handleUpdate(row) {
			this.reset();
			getPhysical(row.physicalId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改";
			});
		},
		saveDrugType(queryForm) {
			listPhysical({data: {typeId: obj.typeId}}).then(res => {
				this.queryForm = res.rows;
			})
		},
		submit() {
			if (this.title == '修改') {
				this.$refs["ClassificationFrom"].validate(valid => {
					updateType(this.ClassificationFrom).then(response => {
						if (response.code === 200) {
							this.msgSuccess("修改成功");
							this.ClassificationOpen = false;
							this.getPhysicalType();
							this.reset();
						}
					})
				})
			} else if (this.title == '新增') {
				this.$refs["ClassificationFrom"].validate(valid => {
					addType(this.ClassificationFrom).then(response => {
						if (response.code === 200) {
							this.msgSuccess("新增成功");
							this.ClassificationOpen = false;
							this.getPhysicalType();
							this.reset();
						}
					});
				})
			}

		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (this.value) {
					this.form.isHot = 0
				} else {
					this.form.isHot = 1
				}
				if (valid) {
					if (this.form.physicalId != null) {
						updatePhysical(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							}
						});
					} else {
						this.form.typeId = this.typeId
						addPhysical(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							}
						});
					}
				}
			});
		},
		treeRender(h, {node, data, store}) {
			return (
				<span class="tree-node">
                    <span>
                        <el-badge>
                            <i className="fa fa-user-o"></i><span>{node.label}</span>
                        </el-badge>
                    </span>
                    <span v-show={node.isCurrent} style="margin-left: 20px;"></span>
            <span v-show={node.isCurrent} style="margin-left: 20px;">
            <el-button title="修改" type="text" on-click={() => this.updatePhysicalType(data)}>
        <i class="el-icon-edit "></i>
            </el-button>
              <el-button v-show={node.isLeaf} title="删除" type="text" on-click={() => this.delPhysicalType()}>
          <i class="el-icon-delete"></i>
            </el-button>
            </span>
                </span>
			)
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const physicalIds = row.physicalId || this.ids;
			this.$confirm('是否确认删除', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				return delPhysical(physicalIds);
			}).then(() => {
				this.getList();
				this.msgSuccess("删除成功");
			}).catch(function () {
			});
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加";
		},
		// 取消按钮
		cancel() {
			this.ClassificationOpen = false;
			this.ClassificationFrom = {
				name: null,
			}
			this.open = false;
			this.reset();
		},
		//表单充值
		reset() {
			this.ClassificationFrom = {};
			this.form = {
				physicalId: null,
				name: null,
				notes: null,
				content: null,
				price: null,
				isHot: null,
				typeId: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null
			};
		},
		// 文件提交处理
		submitUpload() {
			this.$refs.upload.submit();
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			this.upload.isUploading = true;
		},
		// 文件上传成功处理
		handleFileSuccess(response, file, fileList) {
			this.upload.isUploading = false;
			this.form.filePath = response.url
			this.ClassificationFrom.icon = response.fileName
			this.msgSuccess(response.msg);
		},
		//体检分类删除
		delPhysicalType() {
			this.$confirm('确认删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// console.log(this.updateForm.id)
				delType(this.typeId).then(res => {
					this.msgSuccess(res.msg);
					this.queryForm.parentName = null
					this.getPhysicalType();
				})
			})
		},
		/** 体检分类删除*/
		updatePhysicalType(node) {
			console.log(node)
			this.title = '修改'
			this.ClassificationOpen = true
			this.ClassificationFrom = node
		}
	}
}
</script>

<style lang="scss" scoped>
.avatar {
	display: block;
	margin: 0 auto;
	width: 140px;
	height: 140px;
}

.category .el-input--medium {
	width: 135px !important;
}

.el-form-item label:after {
	content: "";
	display: inline-block;
	width: 100%;
}

.el-form-item__label {
	text-align: justify;
	height: 50px;
}

.el-form-item.is-required .el-form-item__label:before {
	content: none !important;
}

.no-data-class {
	font-size: 1500%;
}

.catalogPage {
	i {
		font-size: 36 upx;
		color: #519eff;
	}

	span {
		font-size: 28 upx;
	}

	.border-left {
		height: 500px;
		padding-left: 10px;
		border-left: 1px solid #dedede;
	}
}

.content {
	margin: -20px;
	height: calc(100% + 40px);
	display: flex;

	.aside {
		flex: 0 280px;
		position: relative;
		box-shadow: 1px 0px 4px rgba(0, 21, 41, 0.08);

		.tree-header {
			position: absolute;
			height: 50px;
			width: 100%;
			font-size: 36 upx;
			line-height: 30px;
			font-family: PingFangSC-Regular;
			padding: 10px 22px;
			box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
		}

		.tree {
			margin-top: 55px;
			font-size: 28 upx;

			> > > .tree-node {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28 upx;
				padding-right: 8px;

				.el-button + .el-button {
					margin-left: 3px;
				}

			}
		}

	}

	.service-item {
		flex: 1;
	}

	.demo-form-inline {
		padding: 10px;
	}
}

.el-icon-folder {
	color: #519eff;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 20px;
	box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);

	.main-title {
		font-family: PingFangSC-Light;
		line-height: 20px;
		font-size: 32 upx;
		display: inline-block;
		margin-right: 12px;
		padding-left: 10px;
		border-left: 4px solid #1890FF;
	}
}

.pagina {
	margin-top: 10px;
}
</style>
